<!DOCTYPE html>
<html>
  <head>
    <title>TestProf: FactoryFlame</title>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="src/d3.flameGraph.css">
    <style>
    html, body {
      height: 100%;
      width: 100%;
      min-width: 300px;
    }

    body {
      background: #f9f9f9;
      color: #363636;
      font: 18px/30px "Arial",sans-serif;
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #ff5e5e
    }

    a:visited, a:active{
      color: #ff5e5e;
    }

    a:hover{
      opacity: 0.8;
    }

    h1 {
      font-size: 30px;
      line-height: 32px;
      letter-spacing: 2px;
      font-weight: bold;
      padding: 30px 0 30px 0;
      margin: 0;
    }

    .main {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    header {
      position: relative;
      text-align: center;
      background: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .chart {
      display: flex;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      flex-direction: column;
    }

    .humanoids__link {
      width: 130px;
    }

    .humanoids{
      position: absolute;
      bottom: -23px;
      width: 150px;
      height: 60px;
      margin: 0 auto 0 -10px;
      font-size: 0;
      transform: scale(0.6);
    }
    .humanoids circle{
      transform: scaleY(1);
      transform-origin: 50%;
      animation-duration: 8s;
      animation-name: humanoids-blink;
      animation-iteration-count: infinite;
    }
    .humanoids svg{
      height: 60px;
    }
    .humanoids__human, .humanoids__martian{
      position: absolute;
      width: 80px;
      height: 90px;
      transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
      transform: translateY(0);
    }
    .humanoids__human:hover, .humanoids__martian:hover{
      transform: translateY(-12px);
    }
    .humanoids__martian{
      left: 0;
    }
    .humanoids__human{
      right: 0;
    }
    .humanoids__human circle{
      animation-delay: 0.5s;
    }

    [name="root"] .label {
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div class="main">
      <header>
        <h1>FactoryFlame Report</h1>
        <a class="humanoids__link" href="https://evilmartians.com">
          <div class="humanoids">
            <div class="humanoids__martian"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 92"><path fill="#f64242" d="M26 88L8 78l18-10"/><path fill="#f64242" d="M94 92v-6H44c-5.5 0-10-4.5-10-10s4.5-10 10-10h50V32c0-14-7.9-22-22-22H48c-14.1 0-22 8-22 22v60h68z"/><circle fill="#FFF" cx="48" cy="50" r="8"/><circle fill="#FFF" cx="72" cy="50" r="8"/><circle fill="#BF6C35" cx="48" cy="50" r="4"/><circle fill="#BF6C35" cx="72" cy="50" r="4"/><g fill="#663F4C"><path d="M48 60c-5.5 0-10-4.5-10-10s4.5-10 10-10 10 4.5 10 10-4.5 10-10 10zm0-16c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM82 50c0 5.5-4.5 10-10 10s-10-4.5-10-10 4.5-10 10-10 10 4.5 10 10zm-16 0c0 3.3 2.7 6 6 6s6-2.7 6-6-2.7-6-6-6-6 2.7-6 6z"/><path d="M102 8c-3.8 0-6-2.2-6-6 0-1.1-.9-2-2-2s-2 .9-2 2c0 2.2.5 4.1 1.5 5.7L88.2 13c-4-3.3-9.5-5-16.2-5H48c-6.7 0-12.2 1.7-16.2 4.9l-5.3-5.3C27.5 6.1 28 4.2 28 2c0-1.1-.9-2-2-2s-2 .9-2 2c0 3.8-2.2 6-6 6-1.1 0-2 .9-2 2s.9 2 2 2c2.2 0 4.1-.5 5.7-1.5l5.3 5.3c-3.2 4-4.9 9.5-4.9 16.2v34.8L3.9 78 24 89v3h4V32c0-12.9 7.1-20 20-20h24c12.9 0 20 7.1 20 20v32H44c-6.6 0-12 5.4-12 12s5.4 12 12 12h48v4h4v-8h-2l-4-8-4 8h-4l-4-8-4 8h-4l-4-8-4 8h-4l-4-8-4 8h-4l-4-8-3.1 6.2C37.1 80.7 36 78.5 36 76c0-4.4 3.6-8 8-8l4 8 4-8h4l4 8 4-8h4l4 8 4-8h4l4 8 4-8h8V32c0-6.7-1.7-12.2-4.9-16.2l5.3-5.3c1.6 1 3.5 1.5 5.7 1.5 1.1 0 2-.9 2-2s-1-2-2.1-2zM24 84.4L12.1 78 24 71.4v13z"/></g></svg></div>
            <div class="humanoids__human"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 92"><path fill="#FFFFFF" d="M14 62v30h68v-6H32c-5.5 0-10-4.5-10-10s4.5-10 10-10h50v-4c4 0 8-3.6 8-8s-4-8-8-8V32c0-14-7.9-22-22-22H36c-14.1 0-22 8-22 22v14c-4 0-8 3.6-8 8s4 8 8 8z"/><circle fill="#FFF" cx="36" cy="50" r="8"/><circle fill="#FFF" cx="60" cy="50" r="8"/><circle fill="#f64242" cx="36" cy="50" r="4"/><circle fill="#f64242" cx="60" cy="50" r="4"/><path fill="#f64242" d="M60 10H36c-14.1 0-22 8-22 22v2l4-4 6 6 6-6 6 6 6-6 6 6 6-6 6 6 6-6 6 6 6-6 4 4v-2c0-14-7.9-22-22-22z"/><g fill="#663F4C"><path d="M36 60c-5.5 0-10-4.5-10-10s4.5-10 10-10 10 4.5 10 10-4.5 10-10 10zm0-16c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM60 60c-5.5 0-10-4.5-10-10s4.5-10 10-10 10 4.5 10 10-4.5 10-10 10zm0-16c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"/><path d="M12 63.8V92h4V32c0-12.9 7.1-20 20-20h24c12.9 0 20 7.1 20 20v32H32c-6.6 0-12 5.4-12 12s5.4 12 12 12h48v4h4v-8H74v-1c0-1.7-1.3-3-3-3s-3 1.3-3 3v1h-6v-1c0-1.7-1.3-3-3-3s-3 1.3-3 3v1h-6v-1c0-1.7-1.3-3-3-3s-3 1.3-3 3v1h-6v-1c0-1.7-1.3-3-3-3s-3 1.3-3 3v1c-4 0-8-3.6-8-8s3.6-8 8-8h6v1c0 1.7 1.3 3 3 3s3-1.3 3-3v-1h6v1c0 1.7 1.3 3 3 3s3-1.3 3-3v-1h6v1c0 1.7 1.3 3 3 3s3-1.3 3-3v-1h6v1c0 1.7 1.3 3 3 3s3-1.3 3-3v-1h4v-4.2c5-.9 8-5 8-9.8s-3-8.9-8-9.8V32c0-15.3-8.7-24-24-24H36c-15.3 0-24 8.7-24 24v12.2c-5 .9-8 5-8 9.8s3 8.9 8 9.8zm72-15.5c2 .8 4 3 4 5.7s-2 4.8-4 5.7V48.3zm-72 0v11.3c-2-.8-4-3-4-5.7s2-4.7 4-5.6z"/></g></svg></div>
          </div>
        </a>
      </header>
      <div class="chart">
        <div id="chart">
        </div>
        <hr>
        <div id="details">
        </div>
      </div>
    </div>

    <script type="text/javascript" src="src/d3.v4.min.js"></script>
    <script type="text/javascript" src="src/d3-tip.js"></script>
    <script type="text/javascript" src="src/d3.flameGraph.js"></script>

    <script type="text/javascript">
    var flameGraph = d3.flameGraph()
      .height(360)
      .cellHeight(18)
      .transitionDuration(750)
      .transitionEase(d3.easeCubic)
      .title("");

    // Example on how to use custom tooltips using d3-tip.
    var tip = d3.tip()
      .direction("s")
      .offset([8, 0])
      .attr('class', 'd3-flame-graph-tip')
      .html(function(d) { return "name: " + d.data.name + ", total: " + d.data.value; });

    flameGraph.tooltip(tip);

    report_data = JSON.parse('{"total":27,"roots":[{"name":"user","value":21,"children":[{"name":"account","value":20}]},{"name":"post","value":1,"children":[{"name":"account","value":1,"children":[{"name":"user","value":1,"children":[{"name":"account","value":1}]}]}]},{"name":"comment","value":4,"children":[{"name":"post","value":1},{"name":"user","value":3,"children":[{"name":"account","value":3,"children":[{"name":"post","value":2,"children":[{"name":"account","value":2,"children":[{"name":"user","value":2,"children":[{"name":"account","value":2,"children":[{"name":"subscription","value":2,"children":[{"name":"order","value":2,"children":[{"name":"account","value":2,"children":[{"name":"user","value":2,"children":[{"name":"profile","value":2,"children":[{"name":"post","value":1,"children":[{"name":"account","value":1,"children":[{"name":"user","value":1,"children":[{"name":"account","value":1,"children":[{"name":"subscription","value":1}]}]}]}]}]}]}]}]}]}]}]}]}]},{"name":"user","value":1,"children":[{"name":"account","value":1,"children":[{"name":"subscription","value":1,"children":[{"name":"order","value":1,"children":[{"name":"account","value":1,"children":[{"name":"user","value":1,"children":[{"name":"profile","value":1}]}]}]}]}]}]}]}]}]},{"name":"account","value":1}]}');

    data = {
      name: "root",
      value: report_data.total,
      color: "#9e9e9e",
      children: report_data.roots
    };

    d3.select("#chart")
        .datum(data)
        .call(flameGraph);
    </script>
  </body>
</html>
